<template>
    <div class="wen-xiao">
        <div class="wen-top">
            <van-nav-bar left-arrow title="消息" right-text="全部已读" @click-left="fant"> </van-nav-bar>
        </div>
        <div class="open">
            <div class="open-input">
                    <img src="../../assets/images/guan.png" alt="" class="xx">
                <div class="xitong">打开系统通知，H币入账等消息不错过</div>
                <div class="kai">开启</div>
            </div>
        </div>
        <div class="xiao-lie">
            <router-link to="system">
                <div class="xiao-lie-1">
                    <img src="../../assets/images/xiao1.png" alt="">
                    <div>系统消息</div>
                </div>
            </router-link>
            <router-link to="Consultation">
                <div class="xiao-lie-2">
                    <img src="../../assets/images/xiao2.png" alt="">
                    <div>问诊消息</div>
                </div>
            </router-link>
            <router-link to="report">
                <div class="xiao-lie-3">
                    <img src="../../assets/images/xiao3.png" alt="">
                    <div>H币入账消息</div>
                </div>
            </router-link>
            
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const fant = () => {
  router.push('/ConsultationList');
};

</script>

<style lang="scss" scoped>
    .wen-xiao{
        width: 120%;
        height: 92vh;
        margin-left: -30px;
        margin-top: -20px;
        position: relative;
        .wen-top{
            width: 100%;
            height: 40px;
            border-bottom: solid 1px #dfdddd;
            .fanhui{
                width: 25px;
                height: 25px;
                margin: 5px 10px;
            }
            h3{
                position: absolute;
                top: 5px;
                left: 170px;
                font-weight: 600;
            }
            .lingdang{
                width: 25px;
                height: 25px;
                position: absolute;
                right: 10px;
                top: 7px;
            }
            .quan{
                position: absolute;
                right: 10px;
                top: 7px;
                font-weight: 550;
            }
        }   
        .open{
            width: 100%;
            height: 45px;
            background-color: #f0f0f0;
            position: relative;
            .open-input{
                width: 350px;
                height: 30px;
                position: absolute;
                left: 11px;
                top: 6px;
                background-color: white;
                .xx{
                    width: 20px;
                    height: 20px;
                    margin-left: 10px;
                    font-weight: 600;
                    float: left;
                    margin-top: 4px;
                }
                .xitong{
                    margin-left: 10px;
                    float: left;
                    font-size: 12px;
                    margin-top: 5px;
                }
                .kai{
                    width: 45px;
                    height: 20px;
                    float: right;
                    text-align: center;
                    line-height: 20px;
                    margin-right: 10px;
                    border-radius: 20px;
                    background-color: rgb(61, 124, 226);
                    color: white;
                    margin-top: 5px;
                    font-size: 12px;
                }
            }
        }
        .xiao-lie{
            width: 100%;
            height: 570px;
            .xiao-lie-1{
                width: 100%;
                height: 40px;
                border-bottom: solid 1px #c5c0c0;
                margin-top: 10px;
                position: relative;
                img{
                    width: 50px;
                    height: 45px;
                    position: absolute;
                    left: 15px;
                    top: -20px;
                }
                div{
                    float: left;
                    position: absolute;
                    left: 90px;
                    top: -10px;
                    color: #68d1ac;
                    font-weight: 600;
                }
            }
            .xiao-lie-2{
                width: 100%;
                height: 40px;
                border-bottom: solid 1px #c5c0c0;
                margin-top: 10px;
                position: relative;
                img{
                    width: 50px;
                    height: 45px;
                    position: absolute;
                    left: 15px;
                    top: -18px;
                }
                div{
                    float: left;
                    position: absolute;
                    left: 90px;
                    top: -10px;
                    color: #68d1ac;
                    font-weight: 600;
                }
            }
            .xiao-lie-3{
                width: 100%;
                height: 40px;
                border-bottom: solid 1px #c5c0c0;
                margin-top: 10px;
                position: relative;
                img{
                    width: 50px;
                    height: 45px;
                    position: absolute;
                    left: 15px;
                    top: -18px;
                }
                div{
                    float: left;
                    position: absolute;
                    left: 90px;
                    top: -10px;
                    color: #68d1ac;
                    font-weight: 600;
                }
            }
        }
    }
</style>